<template>
    <div class="Payment">
         <headerTou title="买单" :isfanhui=true :border=false url='friendsPrivilege'></headerTou>
         <div class="touxiang">
             <img src="../img/Rectangle@2x.png" alt="">
             <div>卖卖网</div>
         </div>
         <div class="kuang">
            <div class="jiner">金额</div>
            <div class="shuliang">
                <span class="span1">￥</span><span class="span2">55555</span>
            </div>
         </div>
         <div class="zhifu">
            储值余额支付（剩余￥33.33）
         </div>
         <div class="zhifu maidan" @click="maidan">
           微信买单
         </div>
    </div>
</template>
<script>
import headerTou from "./zujian/header.vue";
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
      maidan:function(){
            this.$router.push({name:"PaymentSuccess"})
      }
  },
  components: {
    headerTou
  }
};
</script>
<style lang="scss" scoped>
.Payment {
  .touxiang {
    width: 750px;
    height: 264px;
    position: relative;
    img {
      width: 48 * 2px;
      height: 48 * 2px;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
    }
    div {
      font-family: PingFangSC-Regular;
      font-size: 32px;
      color: #333333;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 150px;
      margin: auto;
      text-align: center;
      height: 40px;
    }
  }
  .kuang {
    margin: 0 44px;
    height: 216px;
    width: 332 * 2px;
    opacity: 0.5;
    border: 2px solid #a5a5a5;
    border-radius: 10px;
    box-shadow: 0 0.026667rem 0.053333rem 0 rgba(40, 8, 92, 0.4);
    margin-bottom: 56px;
    & > .jiner {
      padding: 32px;
      font-family: PingFangSC-Regular;
      font-size: 28px;
      color: #a5a5a5;
    }
    & > .shuliang {
      padding: 0 32px;
      & > .span1 {
        font-family: PingFangSC-Regular;
        font-size: 60px;
        color: #333333;
        margin-right: 20px;
      }
      & > .span2 {
        font-family: PingFangSC-Regular;
        font-size: 80px;
        color: #333333;
      }
    }
  }
  & > .zhifu {
    border: 2px solid #a5a5a5;
    border-radius: 8px;
    box-shadow: 0 0.026667rem 0.053333rem 0 rgba(40, 8, 92, 0.4);
    width: 337 * 2px;
    height: 46 * 2px;
    margin: 0 19 * 2px;
    text-align: center;
    line-height: 46 * 2px;
    font-family: PingFangSC-Regular;
    font-size: 32px;
    color: #333333;
  }
  &>.maidan{
      background: #52B045 100%;
      color: #ffffff;
      margin-top:28px; 
  }
}
</style>

